<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row type="flex" :gutter="20">
        <a-col :span="6">
          <a-form-model>
            <a-form-model-item>
              <a-input>
                <a-icon slot="prefix" type="user"></a-icon>
                <a-tooltip title="提示信息" slot="suffix">
                  <a-icon type="info-circle"></a-icon>
                </a-tooltip>
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-button @click="add">操作</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-textarea :autoSize="{ minRows: 2, maxRows: 5 }" :allowClear="true"></a-textarea>
            </a-form-model-item>
            <a-form-model-item>
              <a-input addon-before="http://"></a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-password placeholder="这里输入密码"></a-input-password>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-search placeholder="搜索"></a-input-search>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-search placeholder="搜索" enter-button></a-input-search>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-search placeholder="搜索" enter-button="搜索"></a-input-search>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-group compact>
                <a-input style="width:100px;"></a-input>
                <a-input style="width:100px;"></a-input>
              </a-input-group>
            </a-form-model-item>
            <a-form-model-item>
              <a-input>
                <a-select slot="addonBefore" style="width:100px;" default-value="http://">
                  <a-select-option value="http://">http://</a-select-option>
                  <a-select-option value="https://">https://</a-select-option>
                </a-select>
                <a-select slot="addonAfter" style="width:100px;" default-value=".com">
                  <a-select-option value=".com">.com</a-select-option>
                  <a-select-option value=".net">.net</a-select-option>
                </a-select>
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input placeholder="mysite" default-value="测试">
                <a-icon type="setting" slot="addonAfter"></a-icon>
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input allowClear></a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input allowClear size="large" placeholder="大号输入"></a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-number
                :default-value="100"
                :formatter="value => `$ ${value}`"
                :parser="value => value.replace(/\$\s?/, '')"
              ></a-input-number>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-number default-value="10" :min="10" :max="50" :step="0.1"></a-input-number>
            </a-form-model-item>
            <a-form-model-item> </a-form-model-item>
          </a-form-model>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-select placeholder="请选择内容" style="width:300px">
              <a-select-option value="1">栏目1</a-select-option>
              <a-select-option value="2">栏目2</a-select-option>
            </a-select>
          </a-row>
          <a-row>
            <a-form-model :model="form" :rules="rules" ref="c-form" v-bind="layout">
              <a-form-model-item label="栏目选择" prop="abc.a2">
                <a-select style="width:100px;" v-model="form.abc.a1" placeholder="选择职业" @change="onChange">
                  <a-select-option v-for="item in jobData" :key="item.name">{{ item.name }}</a-select-option>
                </a-select>
                <a-select
                  v-if="form.abc.a1"
                  style="width:200px;margin-left:10px"
                  v-model="form.abc.a2"
                  :placeholder="findChild(form.abc.a1).place"
                >
                  <a-select-option v-for="item in findChild(form.abc.a1).child" :key="item.name">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="栏目2">
                <a-input placeholder="请输入内容"></a-input>
              </a-form-model-item>
              <a-form-model-item label="上传图片">
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="picture-card"
                  :file-list="fileList"
                  ,
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="fileList.length < 8">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">
                      Upload
                    </div>
                  </div>
                </a-upload>
              </a-form-model-item>
              <a-form-model-item label="时间选择">
                <a-time-picker>
                  <a-button>操作时间</a-button>
                  <a-button slot="addon" @click="timeClick">额外的部分</a-button>
                </a-time-picker>
              </a-form-model-item>
              <a-form-model-item label="单选测试">
                <a-radio-group name="radioTest">
                  <a-radio :value="1">选项1</a-radio>
                  <a-radio :value="2">选项2</a-radio>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item :wrapper-col="{ offset: 4 }">
                <a-button @click="submit">提交</a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-descriptions title="详情" :column="2" bordered>
                  <a-descriptions-item label="栏目1">内容1</a-descriptions-item>
                  <a-descriptions-item label="栏目2">内容2</a-descriptions-item>
                  <a-descriptions-item label="栏目3">内容3</a-descriptions-item>
                  <a-descriptions-item label="栏目4">内容4</a-descriptions-item>
                </a-descriptions>
              </a-form-model-item>
              <a-form-model-item>
                <a-descriptions title="详情" layout="vertical" bordered>
                  <a-descriptions-item label="栏目1">内容1</a-descriptions-item>
                  <a-descriptions-item label="栏目2">内容2</a-descriptions-item>
                  <a-descriptions-item label="栏目3">内容3</a-descriptions-item>
                  <a-descriptions-item label="栏目4">内容4</a-descriptions-item>
                </a-descriptions>
              </a-form-model-item>
            </a-form-model>
          </a-row>
          <a-row> </a-row>
        </a-col>
      </a-row>
    </a-card>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </page-header-wrapper>
</template>
<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
export default {
  data() {
    return {
      fileList: [],
      layout: {
        labelCol: {
          span: 3
        },
        wrapperCol: {
          span: 12,
          offset: 1
        }
      },
      form: {
        abc: {
          a1: void 0,
          a2: void 0
        }
      },
      rules: {
        'abc.a2': {
          trigger: [],
          validator: (rule, value, callback) => {
            console.log(rule, value)
            if (!value) {
              const item = this.findChild(this.form.abc.a1)
              if (item) {
                callback(new Error(item.place))
              } else {
                callback(new Error('请选择栏目'))
              }
            } else {
              callback()
            }
          }
        }
      },
      jobData: [
        {
          name: '栏目1',
          place: '请选择栏目1',
          child: [
            {
              name: '栏目1-1'
            },
            {
              name: '栏目1-2'
            }
          ]
        },
        {
          name: '栏目2',
          place: '请选择栏目2',
          child: [
            {
              name: '栏目2-1'
            },
            {
              name: '栏目2-2'
            }
          ]
        }
      ],
      value: 9999,
      previewImage: void 0,
      previewVisible: false
    }
  },
  watch: {
    'form.abc.a2': {
      handler(newValue) {
        if (newValue) {
          console.log(`修改了`)
          const c = this.$refs['c-form']
          c.validateField('abc.a2', valid => {
            console.log(valid)
          })
        }
      }
    }
  },
  methods: {
    timeClick() {
      console.log(`选择日期`)
    },
    handleCancel() {
      this.previewVisible = false
    },
    handleChange(res) {
      console.log(res)
      this.fileList = res.fileList
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    onChange() {
      this.form.abc.a2 = void 0
    },
    submit() {
      const c = this.$refs['c-form']
      c.validate(valid => {
        console.log(valid)
      })
    },
    findChild(name) {
      return this.jobData.find(res => res.name === name)
    },
    add() {
      this.$router.push({
        name: 'list'
      })
    }
  }
}
</script>
<style type="text/css" scoped>
.ant-input-clear-icon {
  color: rgba(0, 0, 0, 0.25);
}
.ant-descriptions-bordered .ant-descriptions-item-label {
  background: #fafafa;
}
.ant-descriptions-bordered .ant-descriptions-item-content,
.ant-descriptions-bordered .ant-descriptions-item-label {
  padding: 16px 24px;
  border-right: 1px solid #e8e8e8;
}
.ant-descriptions-bordered .ant-descriptions-row {
  border-bottom: 1px solid #e8e8e8;
}
</style>
